<template>
    <div>
        <!-- 物料选择区 -->
        <el-dialog v-model="props.WlDialog" title="物料选择" @close="handleClose"
            :style="{ width: '70%', height: '500px' }">

            <el-form :model="form" label-width="100px">
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="物料编码">
                            <el-input v-model="form.materialProductCode" placeholder="请输入物料编码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="物料名称">
                            <el-input v-model="form.productName" placeholder="请输入物料名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button :icon="Search" type="primary" @click="onSearch">搜索</el-button>
                            <el-button :icon="Refresh" plain @click="onReset">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <!-- 表格组件 -->
            <el-table :data="tableData" style="width: 100%" highlight-current-row @row-click="handleRowClick">
                <el-table-column prop="materialProductCode" label="物料编码" align="center" />
                <el-table-column prop="productName" label="物料名称" align="center" />
                <el-table-column prop="specificationAndModel" label="规格型号" align="center" />
                <el-table-column prop="unitName" label="单位" align="center" />
                <el-table-column label="操作" align="center" />
            </el-table>
            <!-- 分页组件 -->
            <div class="pagination">
                <el-pagination :current-page="form.currentPage" :page-size="form.pageSize" :page-sizes="pageSizes"
                    :total="pageResult.total" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
            <div style="text-align: center; margin-top: 20px;">
                <el-button type="primary" @click="handleSubmit">确定</el-button>
                <el-button @click="handleCancel">取消</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Search, Refresh } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
import { findmaterialManagement } from '@/apis/xms/index';
const props = defineProps(['WlDialog']);
const emit = defineEmits(['close-dialog', 'rowDataWl']);
const rowDataWl = ref({});//表格选中行
const form = ref({
    currentPage: 1,
    pageSize: 10,
    materialProductCode: '',
    productName: '',
    materialId: 3
});//查询参数
const tableData = ref([]);//表格数据
const pageResult = ref([]);//分页数据
const loadList = async () => {//刷新数据
    pageResult.value = await findmaterialManagement(form.value);
    tableData.value = pageResult.value.records
}

// 分页大小
const pageSizes = [10, 20, 30, 40, 50]
/**
 * 处理分页大小变化
 * @param size 当前分页大小
 */
const handleSizeChange = async (size) => {
    form.pageSize = size;
    await loadList();
}
/**
 * 处理当前页码变化
 * @param currentPage 当前页码
 */
const handleCurrentChange = async (currentPage) => {
    form.currentPage = currentPage
    await loadList();
}
//搜索功能
const onSearch = async () => {
    // ElMessage.success('搜索功能已触发')
    await loadList();
}
//搜索条件重置
const onReset = async () => {
    Object.keys(form.value).forEach(key => {
        form.value[key] = null;
        form.currentPage = 1,
            form.pageSize = 10,
            form.value.materialId = 3;
    })
    await loadList();
}

//弹窗取消事件
function handleCancel() {
    emit('close-dialog');
    onReset();
}
//获取表格选中的行
const handleRowClick = (row, event) => {
    rowDataWl.value = row;
}
//提交事件
function handleSubmit() {
    emit('rowDataWl', rowDataWl.value);
    handleClose();
}
//关闭弹窗
const handleClose = () => {
    emit('close-dialog');
    onReset();
}

onMounted(async () => {
    await loadList();
})
</script>

<style scoped>
.pagination {
    margin-top: 20px;
    text-align: right;
}
</style>
